<template>
  <!-- 产品映射资金源 -->
  <Card class="cpyszjy page-fill" style="height:900px">
    <div class="form-box">
      <v-form inline>
        <v-form-item label="产品大类" style="margin-bottom:0;">
          <v-select placeholder="产品大类" v-model="productType" :select-list="productTypeList" @item-click="productTypeCheck"></v-select>
        </v-form-item>
        <v-form-item label="版本号" style="margin-bottom:0;">
          <v-select placeholder="版本号" v-model="version" :select-list="versionList" @item-click="versionCheck"></v-select>
        </v-form-item>
        <v-form-item label="产品细类" style="margin-bottom:0;">
          <v-select placeholder="产品细类" v-model="product" :select-list="productList"></v-select>
        </v-form-item>
        <v-form-item label="资金方" style="margin-bottom:0;">
          <v-select placeholder="资金方" v-model="fund" :select-list="fundList"></v-select>
        </v-form-item>
        <v-button size="small" type="primary" @on-click="query" style="margin-left:30px;">查询</v-button>
        <v-button size="small" type="green" @on-click="handleRouterGo('cpyszjyadd')" style="margin-left:10px;">新增
        </v-button>
      </v-form>
    </div>
    <div class="table-data">
      <v-table :columns="columns1" :data="data1"></v-table>
    </div>
    <div class="pagi-box">
      <v-pagination :total="total" :current-page="currentPage" :page-size="pageSize" @on-page-change="handlePageChange">
      </v-pagination>
    </div>
  </Card>
</template>

<script>
import api from '@/api'
export default {
  data () {
    return {
      gdh: '',
      productType: '',
      productTypeList: [],
      version: '',
      versionList: [],
      product: '',
      productList: [],
      fund: '',
      fundList: [],
      columns1: [
        {
          type: 'index'
        },
        {
          title: '产品大类',
          key: 'productTypeName'
        },
        {
          title: '产品',
          key: 'productName'
        },
        {
          title: '资金源',
          key: 'fundName'
        },
        {
          title: '优先级',
          key: 'level'
        },
        {
          title: '状态',
          key: 'status'
        },
        {
          title: '操作',
          render: function (h, param, index) {
            const vm = this
            return h('div', {}, [
              h(
                'v-button',
                {
                  props: {
                    type: 'text'
                  },
                  style: {
                    fontSize: '12px',
                    marginLeft: '5px'
                  },
                  on: {
                    'on-click' () {
                      vm.$router.push({ name: 'cpyszjyeditor', query: { param: JSON.stringify(param.row), type: '1' } })
                    }
                  }
                },
                '查询'
              ),
              h(
                'v-button',
                {
                  props: {
                    type: 'text'
                  },
                  style: {
                    fontSize: '12px',
                    marginLeft: '5px'
                  },
                  on: {
                    'on-click' () {
                      vm.$router.push({ name: 'cpyszjyeditor', query: { param: JSON.stringify(param.row), type: '2' } })
                    }
                  }
                },
                '编辑'
              ),
              h(
                'v-button',
                {
                  props: {
                    type: 'text'
                  },
                  style: {
                    fontSize: '12px',
                    marginLeft: '5px'
                  },
                  on: {
                    'on-click' () {
                      var params = {
                        id: param.row.id,
                        deleteFlag: '1'
                      }
                      api.removeProductMappingFund(params).then(re => {
                        if (re.data.code === 'success') {
                          let data1 = JSON.parse(JSON.stringify(vm.data1))
                          data1.splice(index, 1)
                          vm.data1 = data1
                        }
                      }).catch(er => { })
                    }
                  }
                },
                '删除'
              )
            ])
          }.bind(this)
        }
      ],
      data1: [],
      total: 0,
      currentPage: 1,
      pageSize: 10
    }
  },
  created () {
    var vm = this
    // 产品大类查询
    vm.productTypeList.push({
      value: '',
      label: '请选择'
    })
    api.searchProduct({}).then(re => {
      var allData = re.data.data
      for (var i = 0; i < allData.length; i++) {
        vm.productTypeList.push({
          value: allData[i].productType,
          label: allData[i].productTypeName
        })
      }
    })
    // 产品版本查询
    vm.versionList.push({
      value: '',
      label: '请选择'
    })
    api
      .searchProductVersion({})
      .then(re => {
        var allData = re.data.data
        for (var i = 0; i < allData.length; i++) {
          vm.versionList.push({
            value: allData[i].productVersion,
            label: allData[i].productVersion
          })
        }
      })
      .catch(er => { })
    // 产品小类查询
    vm.productList.push({
      value: '',
      label: '请选择'
    })
    api
      .searchByVersion({})
      .then(re => {
        var allData = re.data.data
        for (var i = 0; i < allData.length; i++) {
          vm.productList.push({
            value: allData[i].productCode,
            label: allData[i].productName
          })
        }
      })
      .catch(er => { })
    // 获取所有资金源
    vm.fundList.push({
      value: '',
      label: '请选择'
    })
    api
      .getFundListDatas({})
      .then(re => {
        var allData = re.data.data.list
        for (var i = 0; i < allData.length; i++) {
          vm.fundList.push({
            value: allData[i].fundCode,
            label: allData[i].fundName
          })
        }
      })
      .catch(er => { })
    vm.query()
  },
  methods: {
    handlePageChange (index) {
      api.searchProductMappingFund({
        productType: this.productType,
        productVersion: this.version,
        productCode: this.product,
        fundCode: this.fund,
        currentPage: index,
        pageSize: this.pageSize
      }).then(re => {
        this.data1 = re.data.data.list
        this.total = re.data.data.total
        this.currentPage = re.data.data.pageNum
      }).catch(er => { })
    },
    handleRouterGo (pathName) {
      this.$router.push(pathName)
    },
    // 点击大类获取相应的版本和小类
    productTypeCheck () {
      var vm = this
      vm.versionList = []
      vm.version = ''
      vm.versionList.push({
        value: '',
        label: '请选择'
      })
      api
        .searchVersion({ productType: vm.productType })
        .then(re => {
          var allData = re.data.data
          for (var i = 0; i < allData.length; i++) {
            vm.versionList.push({
              value: allData[i].productVersion,
              label: allData[i].productVersion
            })
          }
        })
        .catch(er => { })
      vm.productList = []
      vm.product = ''
      vm.productList.push({
        value: '',
        label: '请选择'
      })
      api
        .searchByVersion({ productType: vm.productType, version: vm.version })
        .then(re => {
          var allData = re.data.data
          for (var i = 0; i < allData.length; i++) {
            vm.productList.push({
              value: allData[i].productCode,
              label: allData[i].productName
            })
          }
        })
        .catch(er => { })
    },
    // 根据版本获取小类
    versionCheck () {
      var vm = this
      vm.productList = []
      vm.product = ''
      vm.productList.push({
        value: '',
        label: '请选择'
      })
      api
        .searchByVersion({ productType: vm.productType, version: vm.version })
        .then(re => {
          var allData = re.data.data
          for (var i = 0; i < allData.length; i++) {
            vm.productList.push({
              value: allData[i].productCode,
              label: allData[i].productName
            })
          }
        })
        .catch(er => { })
    },
    query () {
      api.searchProductMappingFund({
        productType: this.productType,
        productVersion: this.version,
        productCode: this.product,
        fundCode: this.fund,
        currentPage: this.currentPage,
        pageSize: this.pageSize
      }).then(re => {
        this.data1 = re.data.data.list
        this.total = re.data.data.total
        this.currentPage = re.data.data.pageNum
      }).catch(er => { })
    }
  }
}
</script>

<style lang="less">
</style>
